<template>
  <div>
    <button @click="login">login</button>
    <button @click="logout">logout</button>
    <button @click="sendSyncMessage">Send Sync Message</button>
    <button @click="sendAsyncMessage">Send Async Message</button>
    <button @click="userOptions">user options</button>
    <div>{{ message }}</div>
  </div>
</template>

<script>
const { ipcRenderer } = window.require("electron");
export default {
  name: "App",

  data() {
    return {
      message: "",
    };
  },
  methods: {
    sendSyncMessage() {
      try {
        const reply = ipcRenderer.sendSync("vue-message", "Hello from Vue");
        this.message = `Sync reply from main process: ${reply}`;
        console.log("Received reply from main process:", reply);
      } catch (error) {
        console.error("Error sending sync message:", error);
      }
    },
    sendAsyncMessage() {
      const reply = ipcRenderer.send(
        "vue-async-message",
        "Async message from Vue"
      );
      ipcRenderer.once("vue-async-reply", (event, arg) => {
        this.message = `Async message sent to main process ${arg}`;
        console.log("Received async reply from main process:", arg);
      });
    },
    userOptions() {
      const reply = ipcRenderer.send("user-options", "User options from Vue");
      ipcRenderer.once("user-options-reply", (event, arg) => {
        this.message = `User options sent to main process ${arg}`;
        console.log("Received user options reply from main process:", arg);
      });
    },
    login() {
      const data = {
        username: "chakcy",
        password: "password",
      };
      ipcRenderer.send("login", data);
      ipcRenderer.once("login-reply", (event, data) => {
        this.message = `Login successful ${data}`;
        console.log("Received login reply from main process:", data);
      });
    },
    logout() {
      ipcRenderer.send("logout");
      ipcRenderer.once("logout-reply", (event, data) => {
        this.message = `Logout successful ${data}`;
        console.log("Received logout reply from main process:", data);
      });
    },
  },
};
</script>
<style lang="scss"></style>
